<template>
<div class="" id="signin">
  <div class="page__hd" v-show="activityTitle">
    <h3 class="page__title" style="word-break: break-all;">{{activityTitle}}</h3>
    <p class="page__desc my-0">
      活动时间:{{$formatYMD(activityStartTime)}} ~ {{$formatYMD(activityEndTime)}}
    </p>
    <!-- <p class="page__desc my-0">开始时间:{{$formatDateTime(activityStartTime)}}</p>
    <p class="page__desc">结束时间:{{$formatDateTime(activityEndTime)}}</p> -->
  </div>
  <div class="form-card shadow-sm">
    <div class="weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">公司名称</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="公司名称" @focus="searchEc" v-model="inputValue">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="姓名" v-model="userName">
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">电话</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="number" placeholder="电话" v-model="phone">
        </div>
      </div>
    </div>
    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" href="javascript:;" @click="confirm" id="showTooltips">签到</a>

      <!-- <a class="weui-btn weui_btn_default" href="javascript:;" @click="dialog" id="showTooltips">弹窗</a> -->
    </div>
  </div>

  <div class="js_dialog" id="iosDialog1" v-show="fail">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
      <div class="weui-dialog__hd"><strong class="weui-dialog__title">{{dialogTitle}}</strong></div>
      <div class="weui-dialog__bd">{{dialogContent}}</div>
      <div class="weui-dialog__ft">
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="shows">确定</a>
      </div>
    </div>
  </div>
  <div class="weui-footer weui-footer_fixed-bottom" v-show="fotter">
    <p class="weui-footer__text" style="margin-bottom: 5px;">
      陕西土豆数据科技有限公司
    </p>
    <p class="weui-footer__text">
      Copyright © 2008  All Rights Reserved
    </p>
  </div>
  <div class="search-moblie" v-show="inputEc">
    <el-input v-model="inputValue" placeholder="请输入公司名称"
      @keyup.enter.native="handleInputConfirm" ref="inputsearch"
    >
      <el-button slot="append" @click="cannel">取消</el-button>
    </el-input>
    <!-- <input type="text" name="" value=""> -->
    <ul class="list-group input-search" >
      <li class="list-group-item"
      v-for="(item, index) in filterEc(inputValue)"
      :key="index"
      @click="handleSelect(item)">{{item.companyName}}</li>
    </ul>
    <!-- <el-autocomplete
      class="weui-input"
      ref="search"
      :autofocus="true"
      popper-class="my-autocomplete"
      v-model="inputValue"
      placeholder="公司名称"
      :fetch-suggestions="querySearchAsync"
      @select="handleSelect"
      @keyup.enter.native="handleInputConfirm"
    >
      <template slot-scope="{ item }">
        <div class="name">{{ item }}</div>
      </template>
    </el-autocomplete> -->
  </div>
</div>
</template>

<script>
import axios from 'axios'
import 'weui'
// import MoblieSearch from '../MoblieSearch'

export default {
  name: "signin",
  title: "签到",
  data() {
    return {
      activityId: '',
      activityTitle: '',
      activityStartTime: 0,
      activityEndTime: 0,
      userName: '',
      phone: '',
      fail: false,
      winHie: 0,
      fotter: true,
      inputValue: '',
      inputEc: false,
      restaurants: [],
      companyList: [],
      selectCompany: {},
      dialogTitle: '',
      dialogContent: ''
    }
  },
  mounted () {
    this.winHie = document.documentElement.clientHeight
    window.onresize = this.reHeight
    // 获取url参数，并获取活动内容及公司相关信息
    this.getContent()
  },
  methods: {
    getContent () {
      this.activityId = this.$getUrlParames('activityId')
      axios.post('/mscs/activity/findActivitySignData', this.$paramsConvert({activityId: this.activityId})).then(res => {
        if (res.data.code === 1) {
          this.activityTitle = res.data.data.activityTitle
          this.activityStartTime = res.data.data.activityStartTime
          this.activityEndTime = res.data.data.activityEndTime
          this.companyList = res.data.data.companyList
        } else {
          // this.$codeError(res)
          this.dialog('提取数据出错', res.data.data)
        }
      }).catch(error => {
        // this.$catchError(error)
        this.dialog('提取数据出错', '提取活动相关内容失败，请告知主办方相关情况，给您带来的不便我们感到非常抱歉！')
      })

    },
    confirm() {
      if (!this.searchCompany()) {
        this.dialog('公司名称错误', '请查证公司名称是否正确')
        return
      }
      if (!this.userName) {
        this.dialog('签到信息不完整', '签到姓名不能为空')
        return
      }
      if (!this.phone) {
        this.dialog('签到信息不完整', '签到电话不能为空')
        return
      }
      let params = {
        activityId: this.activityId,
        userId: this.selectCompany.userId,
        companyName: this.inputValue,
        userName: this.userName,
        phone: this.phone,
      }

      axios.post('/mscs/activity/activityUserSign', this.$paramsConvert(params)).then(res => {
        if (res.data.code === 1) {
          this.$router.replace({
            name: 'signsuccess'
          })
        } else {
          this.dialog('签到失败', res.data.data)
        }
      }).catch(error => {
        this.dialog('签到失败', '未知原因，请告知主办方相关情况，给您带来的不便我们感到非常抱歉！')
      })
    },
    dialog(title, content) {
      this.dialogTitle = title
      this.dialogContent = content
      this.fail = true
    },
    shows() {
      this.fail = false
    },
    reHeight () {
      let height = document.documentElement.clientHeight
      if (height === this.winHie) { // 高度等于全屏高度，软键盘没有弹起
        this.fotter = true
      } else {
        this.fotter = false
      }
    },
    searchEc () {
      this.inputEc = true
    },
    filterEc (name) {
      return this.companyList.filter(item => item.companyName.includes(name))
    },
    handleSelect (tag) {
      this.inputValue = tag.companyName
      this.selectCompany = tag
      this.inputEc = false
    },
    handleInputConfirm () {
      this.inputEc = false
    },
    cannel () {
      this.inputEc = false
      this.inputValue = ''
    },
    searchCompany () {
      for (var i = 0; i < this.companyList.length; i++) {
        if (this.companyList[i].companyName === this.inputValue) {
          this.handleSelect(this.companyList[i])
          return true
        }
      }
      return false
    }
    // 根据输入框的内容，异步查询
    // querySearchAsync(queryString, cb) {
    //   var restaurants = this.restaurants;
    //   var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
    //   axios.post('/mscs/tag/findTag', this.$paramsConvert({tagTypeId: 'B50C5A3E7E6011E8AC3FFA7DEC4CE400', search: queryString})).then(res => {
    //     if (res.data.code === 1) {
    //       cb(res.data.data)
    //     } else {
    //       cb([])
    //     }
    //   }).catch(error => {
    //     cb(['asdfasdf', 'asdfasdfasdf', 'asdfasdfasdf', 'asdfasdfasdf','asdfasdf', 'asdfasdfasdf', 'asdfasdfasdf', 'asdfasdfasdf','asdfasdf', 'asdfasdfasdf', 'asdfasdfasdf', 'asdfasdfasdf','asdfasdf', 'asdfasdfasdf', 'asdfasdfasdf', 'asdfasdfasdf'])
    //   })
    // },
    // createStateFilter(queryString) {
    //   return (restaurant) => {
    //     return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
    //   }
    // },
  },
  watch: {
    'inputEc' (val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.inputsearch.focus()
        })
      }
    }
  }
}
</script>

<style lang="css" scoped>
.page__hd {
    padding: 20px 20px 10px 20px;
}
label {
  margin-bottom: 0;
}
.form-card {
  margin: 15px;
  box-shadow: 0px 0px 10px #e0e0e0;
  padding: 10px 0 10px 0;
  border-radius: 5px;
}
.search-moblie {
  z-index: 3;
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 60px 10px 0 10px;
  width: 100%;
  background: #fff;
}
.input-search {
  max-height: 400px;
  overflow: auto;
  margin-top: 5px;
}
</style>
